<template>
  <div>
    <!-- 自定义表格按钮  v-if="listTpye == 1"-->
    <div class="head-funt">
      <slot name="baseHeadFunt"></slot>
    </div>
    <el-table
      style="width: 100%"
      id="dataTable"
      :data="tableData"
      @selection-change="handleSelectionChange"
      ref="BaseTable"
      @current-change="handleCurrentChangeNew"
    >
      <el-table-column
        v-if="isShowSelect"
        type="selection"
        :align="'center'"
        width="55"
        fixed="left"
      />
      <el-table-column
        type="index"
        label="序号"
        :align="'center'"
        fixed="left"
        width="80"
      />
      <el-table-column
        v-for="column in tableColumns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :sortable="column.prop.indexOf('time') != -1 ? true : false" 
		:min-width="200"
      >
        <!-- 表内容 -->
        <template #default="scope">
          <slot name="tableContent" :scope="scope" :column="column">
            <span style="white-space: normal">{{
              scope.row[column.prop] || scope.row[column.prop] == 0
                ? scope.row[column.prop]
                : "-"
            }}</span>
          </slot>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        v-if="isShowOptColumn"
        :width="tableFuntWidth"
         fixed="right"
      >
        <template #default="scope">
          <slot name="baseTableFunt" :scope="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表展示方式二  v-if="listTpye == 2"-->
    <el-checkbox v-model="checkAll" @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <el-checkbox-group
      v-model="checkList"
      @change="handleCheckboxChange"
      size="large"
    >
      <el-row>
        <el-col
          class="list_home_module"
          :span="5"
          v-for="item in tableData"
          :key="item[vm['id']]"
        >
          <!--列表"-->
          <el-checkbox label="" :value="item[vm['id']]" class="checkboxItem" />
          <div class="modules">
            <div class="modules_img" v-if="imgflag || item[vm['img']]">
              <img
                :src="$fullUrl($banseUrl, item[vm['img']])"
                v-if="item[vm['img']]"
              />
              <!-- <img src="../../assets/images/loginBg.png" v-else/> -->
            </div>
            <div class="modules_content">
              <div class="modules_title">
                <p
                  class="mx-1"
                  v-for="column in tableColumns"
                  :key="column.prop"
                >
                  <!-- 表内容 -->
                  <slot name="tableContent2" :scope="item" :column="column">
                    <span
                      style="white-space: normal"
                      v-if="column.prop !== vm['img']"
                    >
                      {{ column.label }}：{{
                        item[column.prop] || item[column.prop] == 0
                          ? item[column.prop]
                          : "-"
                      }}</span
                    >
                  </slot>
                </p>

                <!-- {{column.label}}：{{item[column.prop]}} -->
                <!-- <p class="mx-1">字段名2：XXX</p>
            <p class="mx-1">字段名3：XXX</p>
            <p class="mx-1">字段名4：XXX</p>
            <p class="mx-1">字段名5：XXX</p> -->
              </div>

              <div class="desc_btn">
                <slot name="baseTableFunt2" :scope="item"></slot>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-checkbox-group>
    <div class="pagination">
      <el-pagination
        :background="true"
        :current-page="pageable.pageNum"
        :page-size="pageable.pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="pageable.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <div class="modal_wrap" v-if="showModal&&refeminderFun">
			<div class="modal_box">
				<!-- <div class="modal_box_close" @click="closeModal">X</div> -->
				<p class="modal_box_title">重要提醒</p>
				<p class="modal_box_text">当前有数据达到预警值！</p>
				<div class="btn_box">
					<span @click="closeModal">取消</span>
					<span @click="closeModal">确定</span>
				</div>
			</div>
		</div>
  </div>
</template>
<script setup>
import {
  removeEmptyProperties,
  $banseUrl,
  $fullUrl,
} from "@/utils/utils.js";
import {$getByParams } from "@/api/Api.js";
import { onMounted, ref, computed, toRefs, watch } from "vue";
import storageHelper from "@/libs/StorageHelper";
let checkList = ref([]);
const props = defineProps({
  vm: {
    type: Object,
    default() {
      return {
        img: "img",
        id: "article_id",
        title: "title",
        description: "description",
        create_time: "create_time",
        content: "content",
        praise_len: "praise_len",
        hits: "hits",
      };
    },
  },
  // 列数据方式 1 table 2图列
  listTpye: {
    type: Number,
    default: 1,
  },
  // 列数据
  tableColumns: {
    type: Array,
    default: [],
  },
  // 刷新
  isRefresh: {
    type: Boolean,
    default: false,
  },
  // table数据url
  requestApi: {
    type: String,
    default: "",
  },
  // 是否显示分页
  pagination: {
    type: Boolean,
    default: true,
  },
  // otherParams-table参数
  otherParams: {
    type: Object,
    default() {
      return null;
    },
  },
  // 是否展示操作列
  isShowOptColumn: {
    type: Boolean,
    default: true,
  },
  // 是否显示勾选框
  isShowSelect: {
    type: Boolean,
    default: true,
  },
  // 是否将table数据暴露出去
  isExportTableDataList: {
    type: Boolean,
    default: false,
  },
  // 操作列宽
  tableFuntWidth: {
    type: [Number, String],
    default: 200,
  },
  showOverflowTooltip: {
    type: Boolean,
    default: true,
  },
  imgflag: {
    type: Boolean,
    default: false,
  },
  //表格禁止勾选行
  selectable: {
    type: Function,
  },
  // 是否有提醒功能
  refeminderFun:{
    type: Boolean,
    default: false,
  },
  // 提醒功能所需参数
  ifsParams: {
    type: Array,
    default: [],
  },
});
// 分页
let pageable = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  like: 0,
});
let BaseTable = ref(null);
let checkAll = ref(false);
let {
  vm,
  listTpye,
  tableColumns,
  isExportTableDataList,
  otherParams,
  isRefresh,
  selectable,
  showOverflowTooltip,
  pagination,
  requestApi,
  isShowOptColumn,
  tableFuntWidth,
  isShowSelect,
  refeminderFun,
  ifsParams,
} = toRefs(props);
let emit = defineEmits([
  "update:isRefresh",
  "handleSelectionChange",
  "handleCurrentChangeNew",
  "handleTableDataList",
]);
// table宽度
let tableWidth = (item) => {
  return item.width ? item.width : 180;
};
let findLabelById = (value, itemColum) => {
  let list = itemColum.enumList;
  let tempItem = list.find((item) => {
    if (/^[A-z]/.test(item.value)) {
      return item.value === value;
    } else {
      return Number(item.value) === Number(value);
    }
  });
  return tempItem?.label || "";
};
// 某些表格禁止勾选
let handleSelectable = (row, index) => {
  if (selectable.value) {
    return selectable.value(row, index);
  }
};
let showModal=ref(false)

let closeModal=()=>{
		showModal.value = false;
}
let open_tip=()=>{
				// const h = this.$createElement;
				let message = "";
				let list = tableData.value;
				for (let n = 0; n < ifsParams.value.length; n++) {
					let o = ifsParams.value[n];
					for (let i = 0; i < list.length; i++) {
						let lt = list[i];
						if (o.type == "数内") {
							if ((o.start || o.start === 0) && (o.end || o.end === 0)) {
								if (lt[o.factor] > o.start && lt[o.factor] < o.end) {
									o["idx"] = o["idx"] + 1;
								}
							} else if (o.start || o.start === 0) {
								if (lt[o.factor] > o.start) {
									o["idx"] = o["idx"] + 1;
								}
							} else if (o.end || o.end === 0) {
								if (lt[o.factor] < o.end) {
									o["idx"] = o["idx"] + 1;
								}
							}
						} else if (o.type == "数外") {
							if ((o.start || o.start === 0) && (o.end || o.end === 0)) {
								if (lt[o.factor] < o.start || lt[o.factor] > o.end) {
									o["idx"] = o["idx"] + 1;
								}
							} else if (o.start || o.start === 0) {
								if (lt[o.factor] < o.start) {
									o["idx"] = o["idx"] + 1;
								}
							} else if (o.end || o.end === 0) {
								if (lt[o.factor] > o.end) {
									o["idx"] = o["idx"] + 1;
								}
							}
						} else if (o.type == "日内") {
							if ((o.start) && (o.end)) {
								if (lt[o.factor] > o.start && lt[o.factor] < o.end) {
									o["idx"] = o["idx"] + 1;
								}
							} else if (o.start) {
								if (lt[o.factor] < o.start) {
									o["idx"] = o["idx"] + 1;
								}
							} else if (o.end) {
								if (lt[o.factor] > o.end) {
									o["idx"] = o["idx"] + 1;
								}
							}
						} else if (o.type == "日外") {
							if (o.start && o.end) {
								if (lt[o.factor] < o.start || lt[o.factor] > o.end) {
									o["idx"] = o["idx"] + 1;
								}
							} else if (o.start) {
								if (lt[o.factor] < o.start) {
									o["idx"] = o["idx"] + 1;
								}
							} else if (o.end) {
								if (lt[o.factor] > o.end) {
									o["idx"] = o["idx"] + 1;
								}
							}
						}
					}

					if (o["idx"]) {
						message += o.title;
						if (o["type"] == "数内") {
							if (o.start || o.start === 0) {
								message += "大于" + o.start;
							}
							if ((o.start || o.start === 0) && (o.end || o.end === 0)) {
								message += "并且";
							}
							if (o.end || o.end === 0) {
								message += "小于" + o.end;
							}
						} else if (o["type"] == "数外") {
							if (o.start || o.start === 0) {
								message += "小于" + o.start;
							}
							if ((o.start || o.start === 0) || (o.end || o.end === 0)) {
								message += "或者";
							}
							if (o.end || o.end === 0) {
								message += "大于" + o.end;
							}
						} else if (o["type"] == "日内") {
							if (o.start) {
								message += "在" + o.start + "之后";
							}
							if (o.start && o.end) {
								message += "并且";
							}
							if (o.end) {
								message += "在" + o.end + "之前";
							}
						} else if (o["type"] == "日外") {
							if (o.start) {
								message += "在" + o.start + "之前";
							}
							if (o.start || o.end) {
								message += "或者";
							}
							if (o.end) {
								message += "在" + o.end + "之后";
							}
						}
						message += "的有" + o["idx"] + "条";
					}
				}

				if (message) {
					message += "，需要处理、请尽快处理。";
					showModal.value = true;
          ElMessage.error(message);
         
					// this.$notify({
					// 	title: '提醒',
					// 	dangerouslyUseHTMLString: true,
					// 	message: h('i', {
					// 		style: 'color: teal'
					// 	}, message)
					// });
				}
			}
let handleCheckAllChange = (val) => {
  const all = tableData.value.map((item) => {
    return item[vm.value["id"]];
  });
  checkList.value = val ? all : [];
  emit("handleSelectionChange", tableData.value, tableData.value);
};
// table数据默认
let tableData = ref([]);
// 列表数据
let getTableList = async () => {
 
  let tempParams = {
    size: pageable.value.pageSize,
    page: pageable.value.pageNum,
    like: pageable.value.like,
    orderby: `create_time desc`,
  };
  // console.log(otherParams.value);
  let cleanedObject = removeEmptyProperties(otherParams.value);
  // console.log(cleanedObject);
  //其他参数
  if (cleanedObject) {
    for (let key in cleanedObject) {
      if (cleanedObject.hasOwnProperty(key)) {
        tempParams[key] = cleanedObject[key];
      }
    }
  }
  // console.log(tempParams);
   // console.log(tempParams);
  // if (refeminderFun.value) {
  //  tempParams = { ...ifsParams.value[0], ...tempParams }
  // }
  await $getByParams(requestApi.value, tempParams).then((data) => {
    if (data.result && data.result.list) {
      tableData.value = data.result?.list;
      pageable.value.total = data.result.count;
      if (isExportTableDataList.value) {
        emit("handleTableDataList", data.result.list);
      }
      emit("update:isRefresh", false);
    }
  });
};
let handleCurrentChangeNew = (row) => {
  emit("handleCurrentChangeNew", row);
};

// 分页 数据量改变
let handleSizeChange = (val) => {
  pageable.value.pageNum = 1;
  pageable.value.pageSize = val;
  getTableList();
};
// 分页页码改变
let handleCurrentChange = (val) => {
  pageable.value.pageNum = val;
  getTableList();
};
//多选框
let handleSelectionChange = (val) => {
  // let lastVal = val;
  if (val) {
    emit("handleSelectionChange", val, tableData.value);
  } else {
    emit("handleSelectionChange", [], tableData.value);
  }
  // if (val.length > 1) {
  //   BaseTable.value.clearSelection();
  //   BaseTable.value.toggleRowSelection(lastVal, true);
  // }
};
// 列表多选框
let handleCheckboxChange = (val) => {
  if (val.length) {
    let result = val.map((ingredient) =>
      tableData.value.find((image) => image[vm.value["id"]] === ingredient)
    );
    emit("handleSelectionChange", result, tableData.value);
  } else {
    emit("handleSelectionChange", [], tableData.value);
  }
  // if (val.length > 1) {
  //   BaseTable.value.clearSelection()
  //   BaseTable.value.toggleRowSelection(lastVal, true)
  // }
};

// 初始化数据
onMounted(() => {
  getTableList();
  if (refeminderFun.value) {
    setTimeout(() => {
     open_tip();
     }, 1000)
  }
  
});

const processTableData = computed(() => {
  if (!pagination.value) return tableData.value;
  return tableData.value.slice(
    (pageable.value.pageNum - 1) * pageable.value.pageSize,
    pageable.value.pageSize * pageable.value.pageNum
  );
});
watch(isRefresh, (val, oldVal) => {
  if (val) {
    getTableList();
  }
});
</script>
<style lang="less">
.el-scroollbar__wrap::-wetkit-scrollbar {
  width: 30px;
  height: 30px;
}
</style>
<style lang="less" scoped>
.head-funt {
  text-align: left;
  margin-left: 10px;
}
.el-table {
  padding: 20px;
}
.list_home_module {
  position: relative;
  width: 100%;
  border-radius: 0.5rem;
  background-color: #fff;
  padding: 0 !important;
  margin: 1rem 2rem;
  padding: 5px 0;
  .checkboxItem {
    position: absolute;
    left: 10px;
  }
}
.modules {
  width: 100%;
  text-align: left;
  display: flex;
  padding: 10px 10px 10px 20px;
  flex-direction: column;
  // height: 320px;
  .modules_img {
    position: relative;
    width: 100%;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.5rem;
      object-fit: fill;
    }
    .action_bar {
      text-align: center;
      color: white;
      width: 100%;
      position: absolute;
      bottom: 5px;
    }
  }
  .modules_content {
    flex: 1;
    padding-left: 10px;
    .el-button--small.is-round {
      padding: 2px 2px;
    }
    .el-button--small {
      font-size: 10px;
    }
    .desc_btn {
      margin-top: 5px;
    }
    .modules_title p {
      font-size: 12px;
      line-height: 1.5rem;
      color: rgb(111 109 109);
    }
  }
  

	.modal_wrap {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999999999;
	}

	.modal_wrap .modal_box {
		width: 400px;
		height: 200px;
		background: url("../../assets/modal_bg.jpg") no-repeat center;
		background-size: cover;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -200px;
		margin-top: -100px;
		border-radius: 10px;
	}

	.modal_wrap .modal_box .modal_box_close {
		font-size: 20px;
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}

	.modal_wrap .modal_box .modal_box_title {
		text-align: center;
		font-size: 18px;
		margin: 16px auto;
		color: #fff;
		border-bottom: 1px solid rgba(117, 116, 116, 0.5);
		padding-bottom: 16px;
		width: 356px;
	}

	.modal_wrap .modal_box .modal_box_text {
		text-align: center;
		font-size: 15px;
		color: #fff;
		margin-top: 25px;
	}

	.modal_wrap .modal_box .btn_box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 42px;
	}

	.modal_wrap .modal_box .btn_box span {
		display: inline-block;
		width: 80px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border: 1px solid #ccc;
		font-size: 14px;
		cursor: pointer;
		color: #fff;
	}

	.modal_wrap .modal_box .btn_box span:nth-child(2) {
		background: #409EFF;
		color: #fff;
		border-color: #409EFF;
		margin-left: 15px;
	}
}
</style>
